import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home/index.vue'// Import the Home component
import Movie from "../views/Movie/index.vue";
import Context from "../components/Context.vue";
import Performance from "../views/Performance/index.vue";
import Cinema from '../views/Cinema/index.vue'
import MovieDetail from '../views/MovieDetail/index.vue'
import SaLa from '../views/SaLa/index.vue'
import Seat from '../views/Seat/index.vue'
const routes = [
    {
        path: '/',
        name: 'Index',
        component: Context,  // Home component for the root route
    },
    {
        path: '/performance',
        name: "Performance",
        component: Performance
    },
    {
        path: "/cinema/:id?",
        name: "Cinema",
        component: Cinema
    },
    {
        path: '/movies',
        name: 'Movies',
        component: Movie,  // Example route for a Movie List
    }, {
        path: '/movieDetail/:id',
        name: 'MovieDetail',
        component: MovieDetail,
        props: true,
    },
    {
        path: '/sala/:movieId/:cinemaId',
        name: 'SaLa',
        component: SaLa,
        props: true,
    },{
        path: '/seat/:salaTimeId?/:movieId?',
        name: 'Seat',
        component: Seat,
        props: true,
    }
];

const router = createRouter({
    history: createWebHistory(),  // Use HTML5 history mode for cleaner URLs
    routes,
});

export default router;
